<template>
    <el-dialog v-model="dialogVisible" :title="title" :close-on-click-modal="false" width="350px">
        <div>
            <el-form ref="formRef" label-position="top" :model="formData" :rules="rules" label-width="100px" class="">
                <el-form-item v-for="(i, index) in formData" :key="index" :label="i.label" :prop="`${i.prop}.value`">
                    <el-input v-if="i.type === 'input'" v-model="i.value" :type="i.inputType || 'text'"
                        :placeholder="i.placeholder" />
                    <div v-if="i.type === 'uploadImage'" >
                        <UploadImage ref="imageRef" v-model:base64-file="formData.logo.value"
                        :file-url="formData.logo.valueUrl ?? ''" :previewList="[formData.logo.valueUrl]"  accept=".png" />
                        <div class="text-12px text-lightgray">仅支持png格式</div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="flex flex-jc-c">
                <div class="flex">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submit">
                        确定
                    </el-button>
                </div>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import UploadImage from '@/components/uploadImage/index.vue'
import type { FormInstance } from 'element-plus'
import { addPartner, editPartner } from '@/api/tools/partner'
import type { PartnerReqDto, PartnerDto } from '@/api/tools/partner/type'
import { getFormDataValue, setFormDataValue } from '@/utils/utils'
import type { PropType } from 'vue'


const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    recordData: {
        type: Object as PropType<PartnerDto>,
    }
})

const emits = defineEmits(['update:show', 'success'])

const dialogVisible = ref(false)

const formRef = ref<FormInstance | null>(null)

const imageRef = ref()


watch(() => props.show, (newval) => {
    dialogVisible.value = newval
    if (newval) {
        if (props.recordData) {
            setFormDataValue({
                list: formData.value
            }, props.recordData)
            formData.value.logo.valueUrl = props.recordData?.logo ?? ''
        }
    }
})

watch(dialogVisible, (newval) => {
    emits('update:show', newval)
    if (!newval) {
        formRef.value?.resetFields()
        formData.value.logo.valueUrl = ''
        console.log(111, imageRef.value[0])
        imageRef.value?.[0]?.clearFiles()
    }
})

const formData = ref({
    name: {
        label: '合作商名称',
        prop: 'name',
        type: 'input',
        placeholder: '请输入合作商名称',
        inputType: 'text',
        value: ''
    },
    appId: {
        label: 'AppID',
        prop: 'appId',
        type: 'input',
        placeholder: '请输入开发者ID',
        inputType: 'text',
        value: ''
    },
    appSecret: {
        label: 'AppSecret',
        prop: 'appSecret',
        type: 'input',
        placeholder: '请输入开发者密码',
        inputType: 'text',
        value: ''
    },
    logo: {
        label: '合作商logo',
        prop: 'logo',
        type: 'uploadImage',
        placeholder: '',
        inputType: '',
        value: '',
        valueUrl: ''
    },
})

const rules = ref({
    'name.value': [
        {
            required: true,
            trigger: 'blur',
            message: '联系人姓名不能为空'
        }
    ],
    'appId.value': [
        {
            required: true,
            trigger: 'blur',
            message: 'appId不能为空'
        }
    ],
    'appSecret.value': [
        {
            required: true,
            trigger: 'blur',
            message: 'appSecret不能为空'
        }
    ],
    'logo.value': [
        {
            required: true,
            trigger: 'change',
            message: 'logo不能为空'
        }
    ],
})

const title = computed(() => {
    return props.recordData?.id ? '编辑合作商' : '新增合作商'
})

const handlePartner = async () => {
    const query = getFormDataValue({
        list: formData.value
    }) as PartnerReqDto
    // 有id 则编辑 否则新增
    if (props.recordData?.id) {
        await editPartner({ ...query, id: props.recordData?.id })
    } else {
        await addPartner(query)
    }
    dialogVisible.value = false
    emits('success')
}

const submit = () => {
    formRef.value?.validate((valid) => {
        if (valid) {
            handlePartner()
        } else {
            console.log('error submit!')
        }
    })
}


</script>
<style lang="scss" scoped>
.bg-gray {
    background: #fafafc;
}

.table-item {
    height: 40px;
    line-height: 40px;
    border-top: 1px solid $borderColor;
    cursor: move;
}

.table-head {
    height: 40px;
    line-height: 40px;
}
</style>